var input = document.getElementById("ipInput");
var clearBtn = document.querySelector(".con-clear");
var message = document.getElementById("message");
var empty = document.querySelector(".main-empty");
var query = document.querySelector(".main-query");
var queryBtn = document.getElementById("queryBtn");
const ipv4Pattern =
  /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
const ipv6Pattern = /^(([0-9a-fA-F]{1,4}):){7}([0-9a-fA-F]{1,4})$/;

// 空状态
function displayEmptyState() {
  empty.style.display = "flex";
  query.style.display = "none";
}
// 显示结果
function displayQueryState() {
  empty.style.display = "none";
  query.style.display = "block";
}
// 按钮禁用
function btnDisabled() {
  queryBtn.textContent = "查询中...";
  queryBtn.disabled = true;
}
//按钮解禁
function btnDisplay() {
  queryBtn.textContent = "查询";
  queryBtn.disabled = false;
}
// 填入数据
function populateData(data) {
  // console.log(data);
  document.getElementById("continent").textContent = data.continent;
  document.getElementById("country").textContent = data.country;
  document.getElementById("region").textContent = data.region;
  document.getElementById("city").textContent = data.city;
  document.getElementById("currency").textContent = data.currency;
  document.getElementById("postalCode").textContent = data.zip;
  document.getElementById("longitude").textContent = data.lon;
  document.getElementById("latitude").textContent = data.lat;
  document.getElementById("timezone").textContent =
    data.timezone + " " + data.offset;
  document.getElementById("isVPN").textContent = data.mobile ? "否" : "是";
  document.getElementById("isHosted").textContent = data.hosting ? "是" : "否";
  document.getElementById("mobile").textContent = data.mobile ? "是" : "否";
  displayQueryState();
}
//发送请求
function getIPData(ip) {
  const url = `http://ip-api.com/json/${ip}?lang=zh-CN&fields=status,message,continent,continentCode,country,countryCode,region,regionName,city,district,zip,lat,lon,timezone,offset,currency,isp,org,as,asname,reverse,mobile,proxy,hosting,query`;
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      if (data.status === "fail") {
        message.textContent = "查询失败，请重新查询或换个IP";
        displayEmptyState();
      } else {
        populateData(data);
      }
    })
    .catch((error) => {
      message.textContent = "查询失败，请重新查询或换个IP";
      displayEmptyState();
    })
    .finally(() => {
      btnDisplay();
    });
}

input.addEventListener("input", function () {
  if (this.value.trim() !== "") {
    clearBtn.style.display = "inline-block";
  } else {
    clearBtn.style.display = "none";
    message.textContent = "";
  }
});
input.addEventListener("focus", function () {
  message.textContent = "";
});
queryBtn.addEventListener("click", function () {
  const inputValue = input.value;
  if (inputValue.trim() === "") {
    message.textContent = "请输入IP地址";
    displayEmptyState();
    return;
  }
  if (!ipv4Pattern.test(inputValue) && !ipv6Pattern.test(inputValue)) {
    message.textContent = "IP格式有误，请重新输入";
    displayEmptyState();
    return;
  }
  btnDisabled();
  getIPData(inputValue);
});
clearBtn.addEventListener("click", function () {
  input.value = "";
  clearBtn.style.display = "none";
  message.textContent = "";
  displayEmptyState();
});


// function search() {
//   console.log("hi, i am click!");
// }
